<template>
    <el-dialog :title="isAdd ? '添加到分组' : '创建分组'" :visible.sync="dialogTableVisible" :show-close="true" :center="true" top="20vh" :before-close="beforeClose">
        <div class="dialogVue">
            <template v-if="isAdd">
                <div class="label">已选好友</div>
                <div class="selectVue">
                    <el-tag v-for="tag in $store.state.selectList" :key="tag.id" closable type="info" size="mini" @close="handleClose(tag)">{{tag.typeStr==="好友" ? tag.friendWechatName : tag.groupName}}</el-tag>
                </div>
                <div class="label" style="padding-top: 10px;">选择分组</div>
                <el-select v-model="category" placeholder="请选择分组" style="width: 100%; margin-top: 10px;" @change="categoryChange" clearable>
                    <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item"></el-option>
                </el-select>
            </template>
            <template v-else>
                <div class="label">分组名称</div>
                <el-input v-model="name" placeholder="请输入分组名称" style="width: 100%; margin-top: 10px;"></el-input>
            </template>
            <div class="btnVue margin20 flex_between">
                <div class="btn" @click="isAdd=!isAdd">{{ isAdd ? "创建分组" : "返回" }}</div>
                <div class="btn" @click="submitFun">确认</div>
            </div>
        </div>
    </el-dialog>
</template>

<script>
import { mapState } from 'vuex';
import { toast } from '@/common/tools';
export default {
    props: {
        dialogTableVisible: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        ...mapState({
            currentWeChat: state=> state.currentWeChat,
            weChatList: state=> state.weChatList,
        })
    },
    data(){
        return {
            categoryList: [],
            category: "",
            categoryId: "",
            isAdd: true,
            name: "",
        }
    },
    methods: {
        beforeClose(){
            this.name = ""
            this.$emit("beforeClose")
        },
        // 获取分组列表
        getCategoryList(){
            this.$post("/front/wechat/friend/categoryList").then(res=>{
                if(res.data.code===0) {
                    this.categoryList = res.data.obj
                }
            })
        },
        handleClose(tag) {
            this.$store.state.selectList.splice(this.$store.state.selectList.indexOf(tag), 1);
        },
        
        categoryChange(e){
            console.log(e)
            this.category = e.name
            this.categoryId = e.id
        },

        submitFun(){
            if(this.isAdd) {  //添加到分组
                if(this.$store.state.selectList.length===0) return toast(1, "请至少选择一个好友")
            }else{ //创建分组
                if(!this.name) return toast(1, "请输入分组名称")
                this.$post("/front/wechat/friend/createCategory", {
                    name: this.name
                }).then(res=>{
                    if(res.data.code===0) {
                        toast(0, "创建成功")
                        this.name = ""
                        this.isAdd = true
                        this.getCategoryList()
                    }else{
                        toast(1, res.data.msg)
                    }
                })
            }
        },
    }
}
</script>

<style lang="less" scoped>
:deep(.el-dialog) {
    width: 500px;
    height: auto;
}
:deep(.el-dialog__header) {
    padding: 20px 0;
}
:deep(.el-dialog__body) {
    padding: 0 20px 30px;
}
.label {
    font-size: 12px;
    font-weight: 600;
}
:deep(.el-tag--info) {
    margin: 3px;
}
.selectVue {
    width: 100%;
    height: 150px;
    border: 1px solid #DCDFE6;
    border-radius: 5px;
    padding: 6px;
    margin-top: 10px;
    overflow-y: scroll;
    margin-bottom: 10px;
}
.selectVue::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.btnVue {
    width: 100%;
    height: 40px;
    .btn {
        width: 200px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        border-radius: 5px;
        cursor: pointer;
    }
    .btn:nth-child(1) {
        background: #f5f5f5;
    }
    .btn:nth-child(2) {
        background: #0147fd;
        color: #fff;
    }
}
</style>